<template>
  <div class="slide">
    <el-card class="content1" shadow="never">
      <el-row :gutter="20">
        <el-col
          :span="6"
          v-for="item in pageList"
          :key="item.field"
          @click="getPush(item.key, item.label)"
        >
          <div class="grayDiv">
            <span class="grayText">{{ item.label }}</span>
            <span class="column">{{ homeAnnCount[item.field] }}件</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <div class="content2">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card shadow="never" style="height: 280px">
            <div slot="header" class="clearfix">
              <span style="font-size: 17px;font-weight: bold">待阅文档</span>
              <span
                @click="goPage('UNREAD')"
                style="color:#99B4CA;cursor:pointer;float: right"
              >
                更多
              </span>
            </div>
            <div>
              <div
                class="itemCss"
                v-for="(item, index) in pageData"
                :key="index"
              >
                <box-border class="border-item">
                  <div style="width:250px" @click="openDetails(item)">
                    <p
                      style="font-size: 16px;color: #333333;margin: 11px 0;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
                    >
                      {{ item.title }}
                    </p>
                    <div style="display: flex;justify-content: space-between">
                      <span
                        style="font-size: 13px;color:#999999;line-height: 19px"
                      >{{
                          item.createTime | formatTime("yyyy-MM-dd HH:mm")
                        }}</span
                      >
                      <span
                        style="font-size: 14px; color: #5FE1E0;line-height: 19px"
                      >{{ item.categoryName }}
                      </span>
                    </div>
                  </div>
                </box-border>
              </div>
              <div v-if="pageData.length == 0">
                <div style="text-align: center">
                  <img
                    style="margin-top:15px;margin-bottom: 0;padding-bottom: 0;opacity: 0.5"
                    src="@/assets/empty.png"
                  />
                  <span
                    style="margin: 0;display: block;color:#909399;font-size: 14px"
                  >暂无数据</span
                  >
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never" style="height: 280px">
            <div slot="header" class="clearfix">
              <span style="font-size: 17px;font-weight: bold">已阅文档</span>
              <span
                @click="goPage('READ')"
                style="color:#99B4CA;cursor:pointer;float: right"
              >
                更多
              </span>
            </div>
            <div>
              <div
                class="itemCss"
                v-for="(item, index) in pageData2"
                :key="index"
              >
                <box-border class="border-item">
                  <div style="width:210px" @click="openDetails(item)">
                    <p
                      style="font-size: 16px;color: #333333;margin: 11px 0;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
                    >
                      {{ item.title }}
                    </p>
                    <div style="display: flex;justify-content: space-between">
                      <span
                        style="font-size: 13px;color:#999999;line-height: 19px"
                      >{{
                          item.createTime | formatTime("yyyy-MM-dd HH:mm")
                        }}</span
                      >
                      <span
                        style="font-size: 14px; color: #5FE1E0;line-height: 19px"
                      >{{ item.categoryName }}
                      </span>
                    </div>
                  </div>
                </box-border>
              </div>
              <div v-if="pageData2.length == 0">
                <div style="text-align: center">
                  <img
                    style="margin-top:15px;margin-bottom: 0;padding-bottom: 0;opacity: 0.5"
                    src="@/assets/empty.png"
                  />
                  <span
                    style="margin: 0;display: block;color:#909399;font-size: 14px"
                  >暂无数据</span
                  >
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-card class="content3" shadow="never">
      <div slot="header" class="clearfix">
        <span style="font-size: 17px;font-weight: bold">已发文档</span>
        <span
          @click="goMorePage"
          style="color:#99B4CA;cursor:pointer;float: right"
        >
          更多
        </span>
      </div>
      <el-table
        :show-header="false"
        style="width: 100%;padding:0 10px;margin-top: 10px"
        stripe
        :row-style="{ height: '46px', cursor: 'pointer' }"
        :data="pageData1"
        @row-click="openDetails"
      >
        <el-table-column width="10"></el-table-column>
        <el-table-column show-overflow-tooltip prop="title"></el-table-column>
        <el-table-column label="公文类别" width="120" prop="categoryName">
          <template slot-scope="scope">
            <span style="color: #999999">
              {{ scope.row.categoryName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          show-overflow-tooltip
          prop="emergencyDegree"
        >
          <template slot-scope="scope">
            <span style="color: #999999">
              {{ scope.row.emergencyDegree | keyText("OFFICIAL_EMERGENCY") }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="120" show-overflow-tooltip prop="organizeName">
          <template slot-scope="scope">
            <span style="color: #999999">
              {{ scope.row.organizeName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column width="160" show-overflow-tooltip prop="createTime">
          <template slot-scope="scope">
            <span style="color: #999999">
              {{ scope.row.createTime | formatTime("yyyy-MM-dd HH:mm") }}
            </span>
          </template>
        </el-table-column>
        <div slot="empty" class="empty">
          <div style="position: relative;height:200px">
            <img
              style="margin-top:11%;margin-bottom: 0;padding-bottom: 0;opacity: 0.5"
              src="@/assets/empty.png"
            />
            <span
              style="margin: 0;display: block;position:absolute;top:155px;left:46%"
            >暂无数据</span
            >
          </div>
        </div>
      </el-table>
    </el-card>
  </div>
</template>
<script>
export default {
  created() {
    this.getPageData();
    this.getPageData1();
    this.getWaitPageData();
    this.getHomeAnnCount();
  },
  data() {
    return {
      searchDto: {
        pageIndex: 1,
        pageSize: 10,
        keywords: "",
        categoryId: "",
        myAccept: 0,
        readStatus: "",
        deleteFlag: 0,
        status: "COMPLETE",
        module: "DOCUMENT"
      },
      searchWaitDto: {
        pageIndex: "",
        pageSize: 10,
        keywords: "",
        myCreate: 0,
        categoryId: "",
        deleteFlag: 0,
        status: "",
        module: "DOCUMENT"
      },
      homeAnnCount: {}, //统计数据
      pageData: [], //公文列表
      pageData2: [],
      pageData1: [], //待办公文
      pageList: [
        {
          key: "myAccept",
          label: "待阅文档",
          field: "unReadNumber"
        },
        {
          key: "myAccept",
          label: "已收文档",
          field: "receiverNumber"
        },
        { key: "myRelease", label: "已发文档", field: "sendNumber" },

        { key: "deleteFlag", label: "回收站", field: "deleteNumber" }
      ]
    };
  },
  methods: {
    //获取统计收据
    getHomeAnnCount() {
      this.API.getDocumentMineCount().then(ret => {
        this.homeAnnCount = ret.data;
      });
    },
    //获取公文列表
    getPageData() {
      this.searchDto.readStatus = "UNREAD";
      let tem = this.searchDto;
      this.API.getDocumentPageList(tem).then(ret => {
        this.pageData = ret.data.records;
      });
    },
    getPageData1() {
      this.searchDto.readStatus = "READ";
      let tem = this.searchDto;
      this.API.getDocumentPageList(tem).then(ret => {
        this.pageData2 = ret.data.records;
      });
    },
    //获取待办公文
    getWaitPageData() {
      let tem = this.searchWaitDto;
      this.API.getDocumentPageList(tem).then(ret => {
        this.pageData1 = ret.data.records;
      });
    },
    openDetails(row) {
      this.$router.push({ name: "examine", query: { row: row.id } });
    },
    goPage(val) {
      this.$router.push({
        name: "myAccept",
        query: { status: val }
      });
    },
    getPush(val, label) {
      if (label == "待阅文档") {
        this.$router.push({ name: val, query: { status: "UNREAD" } });
      } else {
        this.$router.push({ name: val });
      }
    },
    goMorePage() {
      this.$router.push({ name: "myRelease" });
    }
  }
};
</script>
<style scoped lang="less">
  .slide {
    height: 760px;
    display: flex;
    float: right;
    flex-flow: column;
    width: 77.4%;
  }

  .content1 {
    width: 100%;
    height: 100px;
  }

  .content2 {
    width: 100%;
    height: 280px;
    margin-top: 10px;
  }

  .content3 {
    width: 100%;
    height: 360px;
    margin-top: 10px;
  }

  .grayDiv {
    width: 100%;
    height: 66px;
    background: rgba(244, 250, 255, 1);
    border-radius: 6px;
    /*margin-right: 20px;*/
    display: inline-block;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
  }

  /*.grayDiv:nth-child(4) {*/
  /*  margin-right: 0;*/
  /*}*/

  .grayText {
    text-align: center;
    line-height: 66px;
    color: #99b4ca;
    font-weight: bold;
    margin-right: 55px;
    font-size: 17px;
  }

  .column {
    color: #0075ff;
    font-weight: bold;
    margin-left: 55px;
    font-size: 17px;
  }

  .itemCss {
    display: flex;
    float: left;
    justify-content: space-between;
    cursor: pointer;
  }

  .border-item {
    display: inline-block;
    vertical-align: top;
    width: 245px;
    height: 75px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 20px rgba(0, 117, 255, 0.06);
    -webkit-box-shadow: 0px 3px 20px rgba(0, 117, 255, 0.06);
    padding-top: -5px;
    padding-left: 20px;
    border-radius: 4px;
    margin-right: 20px;
    margin-bottom: 20px;

    &:hover {
      background: #f4faff;
      opacity: 1;
    }
  }

  .itemCss:nth-child(2n) .border-item {
    margin-right: 0 !important;
  }

  .itemCss:nth-child(1) .border-item {
    margin-top: 5px !important;
  }

  .itemCss:nth-child(2) .border-item {
    margin-top: 5px !important;
  }

  .content3 /deep/ .el-card__body {
    padding: 0;
  }

  /deep/ .el-tabs__item {
    font-size: 15px;
    margin: 3px 0;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  /deep/ .el-table td,
  .el-table th.is-leaf {
    border-bottom: 0;
  }
</style>
